<template>
	<view class="container">
		<navbar background="transparent" color='#fff'></navbar>
		<view class="wrap">
			<view class="title-wrap">
				<view class="title">
					<image src='../img/zhanghaorenzheng.png'></image>
				</view>
				<view class="sub-title">更加真实，更受欢迎</view>
			</view>
			<view class="auth">
				<image src='../img/renzhneg.png'></image>
			</view>
			<view class="form-wrap">
				<view class="form-title-wrap">
					请您使用有效账号信息认证
				</view>
				<view class="form-con">
					<view class="form-item">
						<label>手机号码</label>
						<view class="input">
							<input type='number'/>
						</view>
					</view>
					<view class="form-item">
						<label>账号</label>
						<view class="input">
							<input type='number'/>
						</view>
					</view>
					<view class="form-item">
						<label>真实姓名</label>
						<view class="input">
							<input type='text'/>
						</view>
					</view>
				</view>
				<button class="btn line_center">确定提交</button>
			</view>
			<view class="tip-wrap">
				<uni-icons type="info" color='#D5D7D9'></uni-icons>
				<text>实名仅用于您是否为真人用户，不会对信息做任何采集保留，请放心使用。</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wrapH:''
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #407DFA 30%, rgba(64,125,250,0.4),#F2F4F7);
	}
	.wrap{
		position: relative;
	}
	.title-wrap{
		padding:56rpx 48rpx 88rpx;
		.title{
			width: 192rpx;
			height: 58rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.sub-title{
			font-weight: bold;
			color:#fff;
		}
	}
	.auth{
		width: 314rpx;
		height: 358rpx;
		position: absolute;
		right:32rpx;
		top:0;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.form-wrap{
		margin:0 24rpx;
		background: #fff;
		border-radius: 16rpx;
		position: relative;
		z-index:22;
		margin-top:20rpx;
		padding-bottom: 22rpx;
		.form-title-wrap{
			height: 100rpx;
			background: #EEF1FB;
			padding:0 24rpx;
			display: flex;
			align-items: center;
			border-radius: 16rpx 16rpx 0 0;
			font-size: 32rpx;
			font-weight: bold;
		}
		.form-con{
			margin:32rpx 24rpx 0;
			.form-item{
				height: 88rpx;
				display: flex;
				align-items: center;
				padding:0 22rpx;
				background: #F3F5F7;
				border-radius: 44rpx;
				margin-bottom: 36rpx;
				label{
					width: 112rpx;
					text-align: justify;
					margin-right: 28rpx;
				}
				.input{
					flex:1;
					height: 100%;
					overflow: hidden;
					input{
						font-size: 28rpx;
						height: 100%;
					}
				}
			}
		}
		.btn{
			width: 654rpx;
			height: 88rpx;
			background: linear-gradient( 140deg, #407DFA 0%, #4580FA 100%);
			border-radius: 44rpx;
			font-size: 32rpx;
			color:#fff;
			margin-top:32rpx;
		}
	}
	.tip-wrap{
		margin:24rpx 24rpx 0;
		padding:22rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		font-size: 24rpx;
		color:#D5D7D9;
		text{
			margin-left: 22rpx;
		}
	}

</style>
